<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/js/tool.js"></script>
    <style>
        .input-group {
            margin-bottom: 10px;
        }

        .createCode {
            user-select: none;
        }

        .right {
            font-size: 12px;
            color: green;
        }

        .error {
            font-size: 12px;
            color: red;
        }
    </style>
</head>

<body>
    <div class="form">
        <div class="input-group">
            <lable>账&emsp;号:</lable>
            <input type="text" class="user">
            <span class="user_tips"></span>
        </div>
        <div class="input-group">
            <lable>密&emsp;码:</lable>
            <input type="text" class="pwd">
            <span class="pwd_tips"></span>
        </div>
        <div class="input-group">
            <input type="submit" class="btn" value="登录">
            <input type="reset" class="btn" value="取消">
        </div>
    </div>
</body>
<script type="module">
    // 用户名
    // 由数字 字母 _ 组成, 6-12位, 切不能以数字开头

    // 安装从易到难的顺序:
    // a. 6-12位   /^.{6,12}$/
    // b. 切不能以数字开头   /^[^0-9]/
    // c. 由数字 字母 _ 组成 => 所有的字符都要在(数字 字母 _ )范围内 => 不在此范围内就是非法字符    /[\w]/  => 存在合法字符      /[^\w]/  => 是否存在合法字符    

    // 1. 简易失焦时分开验证

    // 2. 针对用户名 写两种:  1. 一步到位   2. 分开验证

    import { loginAccount } from "../js/api.js"
    import { setCookie } from "../js/cookie.js";



    var userInp = document.getElementsByClassName("user")[0];
    var userTips = document.getElementsByClassName("user_tips")[0];

    var pwdInp = document.getElementsByClassName("pwd")[0];
    var pwdTips = document.getElementsByClassName("pwd_tips")[0];


    var btn = document.getElementsByClassName("btn")[0];


    btn.onclick = function () {
        var user = userInp.value;
        var pwd = pwdInp.value;

        if (user && pwd) {

            loginAccount({ account: user, pwd }).then(result => {
                // console.log(result);  //axios 响应对象 {config,data,headers}

                var { data } = result;  //响应数据
                console.log(data);

                var { status, message, user, token } = data;

                // 登录成功时 存储cookie => lgc=用户名 
                setCookie("lgc", user, 31 * 24 * 60 * 60);


                // token存在哪里 
                // 1. 存cookie 
                // 2. 存localStorage   (不主动与服务器交互)

                // token如果传递给后端
                // 1. 通过cookie  (cookie不能跨网站)
                // 2. 通过请求头携带 (xhr.setRequestHeader())
                // 3. 当做数据传递给后端  
                localStorage.setItem("token",token);

                if (status == 200) {
                    // 判断url上是否存在ReturnUrl 
                    // 1. 有 => 其他页面过来的 => 回去
                    // 2. 没有 => 正常登录 => 去主页

                    var search = location.search;
                    var params = new URLSearchParams(search);
                    var returnUrl = params.get("ReturnUrl");  //对应键名获取数据(自动解码)
                    console.log(returnUrl);

                    if(returnUrl){
                        location.href = returnUrl
                    }else{
                        location.href = "/";
                    }

                } else {
                    alert(message);
                }

            }).catch(err => {
                throw err;
            })

        } else {
            alert("请传入完整信息");
        }

    }

</script>

</html>